<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="basic">
        <basic-info-form ref="basicInfo" :info="info" />
      </el-tab-pane>
      <el-tab-pane label="字段信息" name="columnInfo">
        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
          <el-table-column label="序号" type="index" min-width="60" />
          <el-table-column label="字段列名" prop="columnName" min-width="120" :show-overflow-tooltip="true" />
          <el-table-column label="字段描述" min-width="150">
            <template #default="scope">
              <el-input v-model="scope.row.columnComment"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="物理类型" prop="columnType" min-width="120" :show-overflow-tooltip="true" />
          <el-table-column label="Java类型" min-width="150">
            <template #default="scope">
              <el-select v-model="scope.row.javaType">
                <el-option label="Long" value="Long" />
                <el-option label="String" value="String" />
                <el-option label="Integer" value="Integer" />
                <el-option label="Double" value="Double" />
                <el-option label="BigDecimal" value="BigDecimal" />
                <el-option label="Date" value="Date" />
                <el-option label="Boolean" value="Boolean" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="java属性" min-width="150">
            <template #default="scope">
              <el-input v-model="scope.row.javaField"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="插入" min-width="60">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="编辑" min-width="60">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="列表" min-width="60">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="查询" min-width="60">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="查询方式" min-width="150">
            <template #default="scope">
              <el-select v-model="scope.row.queryType">
                <el-option label="=" value="EQ" />
                <el-option label="!=" value="NE" />
                <el-option label=">" value="GT" />
                <el-option label=">=" value="GE" />
                <el-option label="<" value="LT" />
                <el-option label="<=" value="LE" />
                <el-option label="LIKE" value="LIKE" />
                <el-option label="BETWEEN" value="BETWEEN" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="必填" min-width="60">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="显示类型" min-width="180">
            <template #default="scope">
              <el-select v-model="scope.row.htmlType">
                <el-option label="文本框" value="input" />
                <el-option label="文本域" value="textarea" />
                <el-option label="下拉框" value="select" />
                <el-option label="单选框" value="radio" />
                <el-option label="复选框" value="checkbox" />
                <el-option label="弹出窗口" value="popup" />
                <el-option label="日期时间" value="datetime" />
                <el-option label="日期控件" value="date" />
                <el-option label="时间控件" value="time" />
                <el-option label="图片上传" value="imageUpload" />
                <el-option label="文件上传" value="fileUpload" />
                <el-option label="富文本控件" value="editor" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典类型" min-width="160">
            <template #default="scope">
              <el-select
                v-model="scope.row.dictType"
                clearable
                filterable
                placeholder="请选择"
                @change="handleDictTypeChange(scope.row)"
              >
                <!-- 当显示类型为popup时显示表列表 -->
                <template v-if="scope.row.htmlType === 'popup'">
                  <el-option
                    v-for="table in tableOptions"
                    :key="table.tableName"
                    :label="table.tableComment"
                    :value="table.tableName"
                  >
                    <span style="float: left">{{ table.tableComment }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ table.tableName }}</span>
                  </el-option>
                </template>

                <!-- 其他显示类型显示字典 -->
                <template v-else>
                  <el-option
                    v-for="dict in dictOptions"
                    :key="dict.dictType"
                    :label="dict.dictName"
                    :value="dict.dictType"
                  >
                    <span style="float: left">{{ dict.dictName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                  </el-option>
                </template>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典字段" min-width="180">
            <template #default="scope">
              <div style="display:flex;align-items:center;gap:8px;">
                <el-input v-model="scope.row.dictFields" readonly placeholder="点击配置按钮进行设置" />
                <el-button 
                  size="small" 
                  type="primary" 
                  :icon="Edit"
                  @click="openJsonEditor('dictFields', scope.row)"
                >
                  配置
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="字段映射" min-width="180">
            <template #default="scope">
              <div style="display:flex;align-items:center;gap:8px;">
                <el-input v-model="scope.row.mapping" readonly placeholder="点击配置按钮进行设置" />
                <el-button 
                  size="small" 
                  type="primary" 
                  :icon="Edit"
                  @click="openJsonEditor('mapping', scope.row)"
                >
                  配置
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="联动规则" min-width="280">
            <template #default="scope">
              <div style="display:flex;align-items:center;gap:8px;">
                <el-input v-model="scope.row.onChange" readonly placeholder="点击配置按钮进行设置" />
                <el-button 
                  size="small" 
                  type="primary" 
                  :icon="Edit"
                  @click="openJsonEditor('onChange', scope.row)"
                >
                  配置
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="排序" min-width="80">
            <template #default="scope">
              <el-input v-model="scope.row.sort"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="生成信息" name="genInfo">
        <gen-info-form ref="genInfo" :info="info" :tables="tables" />
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <div style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </div>
    </el-form>

    <!-- JSON 配置对话框 -->
    <el-dialog
      v-model="jsonEditorVisible"
      :title="jsonEditorTitle"
      width="1000px"
      :before-close="handleJsonEditorClose"
      destroy-on-close
    >
      <!-- 字典字段配置 -->
      <div v-if="currentJsonType === 'dictFields'" class="json-editor-section">
        <h4>字典字段配置</h4>
        <p class="config-description">选择需要的字典字段配置项</p>
        
        <div class="checkbox-list">
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.dictValue" 
              @change="updateJson"
            >
              dictValue（值字段）
            </el-checkbox>
            <el-input 
              v-if="selectedOptions.dictValue"
              v-model="fieldValues.dictValue" 
              placeholder="请输入字段名，如：value"
              size="small"
              style="width: 200px; margin-left: 10px;"
              @input="updateJson"
            />
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.dictLabel" 
              @change="updateJson"
            >
              dictLabel（显示字段）
            </el-checkbox>
            <el-input 
              v-if="selectedOptions.dictLabel"
              v-model="fieldValues.dictLabel" 
              placeholder="请输入字段名，如：label"
              size="small"
              style="width: 200px; margin-left: 10px;"
              @input="updateJson"
            />
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.orderField" 
              @change="updateJson"
            >
              orderField（排序字段）
            </el-checkbox>
            <el-input 
              v-if="selectedOptions.orderField"
              v-model="fieldValues.orderField" 
              placeholder="请输入字段名，如：orderNum"
              size="small"
              style="width: 200px; margin-left: 10px;"
              @input="updateJson"
            />
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.where" 
              @change="updateJson"
            >
              where（过滤条件）
            </el-checkbox>
            <el-input 
              v-if="selectedOptions.where"
              v-model="fieldValues.where" 
              placeholder="请输入条件，如：status = 1"
              size="small"
              style="width: 200px; margin-left: 10px;"
              @input="updateJson"
            />
          </div>
        </div>
      </div>

      <!-- 字段映射配置 -->
      <div v-if="currentJsonType === 'mapping'" class="json-editor-section">
        <h4>字段映射配置</h4>
        <p class="config-description">选择需要的字段映射配置项</p>
        
        <div class="checkbox-list">
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.field" 
              @change="updateJson"
            >
              field（字段映射）
            </el-checkbox>
            <div v-if="selectedOptions.field" class="mapping-inputs">
              <el-input 
                v-model="fieldValues.fieldSource" 
                placeholder="源字段名"
                size="small"
                style="width: 150px; margin-left: 10px;"
                @input="updateJson"
              />
              <span style="margin: 0 10px;">→</span>
              <el-input 
                v-model="fieldValues.fieldTarget" 
                placeholder="目标字段名"
                size="small"
                style="width: 150px;"
                @input="updateJson"
              />
            </div>
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.fieldName" 
              @change="updateJson"
            >
              fieldName（字段名称映射）
            </el-checkbox>
            <div v-if="selectedOptions.fieldName" class="mapping-inputs">
              <el-input 
                v-model="fieldValues.fieldNameSource" 
                placeholder="源字段名"
                size="small"
                style="width: 150px; margin-left: 10px;"
                @input="updateJson"
              />
              <span style="margin: 0 10px;">→</span>
              <el-input 
                v-model="fieldValues.fieldNameTarget" 
                placeholder="目标字段名"
                size="small"
                style="width: 150px;"
                @input="updateJson"
              />
            </div>
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.id" 
              @change="updateJson"
            >
              id（ID字段映射）
            </el-checkbox>
            <div v-if="selectedOptions.id" class="mapping-inputs">
              <el-input 
                v-model="fieldValues.idSource" 
                placeholder="源字段名"
                size="small"
                style="width: 150px; margin-left: 10px;"
                @input="updateJson"
              />
              <span style="margin: 0 10px;">→</span>
              <el-input 
                v-model="fieldValues.idTarget" 
                placeholder="目标字段名"
                size="small"
                style="width: 150px;"
                @input="updateJson"
              />
            </div>
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.name" 
              @change="updateJson"
            >
              name（名称字段映射）
            </el-checkbox>
            <div v-if="selectedOptions.name" class="mapping-inputs">
              <el-input 
                v-model="fieldValues.nameSource" 
                placeholder="源字段名"
                size="small"
                style="width: 150px; margin-left: 10px;"
                @input="updateJson"
              />
              <span style="margin: 0 10px;">→</span>
              <el-input 
                v-model="fieldValues.nameTarget" 
                placeholder="目标字段名"
                size="small"
                style="width: 150px;"
                @input="updateJson"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 联动规则配置 -->
      <div v-if="currentJsonType === 'onChange'" class="json-editor-section">
        <h4>联动规则配置</h4>
        <p class="config-description">选择需要的联动规则配置项</p>
        
        <div class="checkbox-list">
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.rules" 
              @change="updateJson"
            >
              rules（联动规则数组）
            </el-checkbox>
            <div v-if="selectedOptions.rules" class="rules-config">
              <div class="rule-item" v-for="(rule, index) in rules" :key="index">
                <el-input 
                  v-model="rule.triggerField" 
                  placeholder="触发字段"
                  size="small"
                  style="width: 120px; margin-left: 10px;"
                  @input="updateJson"
                />
                <span style="margin: 0 10px;">→</span>
                <el-input 
                  v-model="rule.targetField" 
                  placeholder="目标字段"
                  size="small"
                  style="width: 120px;"
                  @input="updateJson"
                />
                <el-select 
                  v-model="rule.type" 
                  placeholder="类型"
                  size="small"
                  style="width: 100px; margin-left: 10px;"
                  @change="updateJson"
                >
                  <el-option label="清空" value="clear" />
                  <el-option label="禁用" value="disable" />
                  <el-option label="启用" value="enable" />
                  <el-option label="计算" value="calculate" />
                </el-select>
                <el-button 
                  type="danger" 
                  size="small" 
                  :icon="Delete"
                  @click="removeRule(index)"
                  style="margin-left: 10px;"
                />
              </div>
              <el-button 
                type="primary" 
                size="small" 
                :icon="Plus"
                @click="addRule"
                style="margin-left: 10px; margin-top: 10px;"
              >
                添加规则
              </el-button>
            </div>
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.type" 
              @change="updateJson"
            >
              type（联动类型）
            </el-checkbox>
            <el-select 
              v-if="selectedOptions.type"
              v-model="fieldValues.type" 
              placeholder="选择类型"
              size="small"
              style="width: 200px; margin-left: 10px;"
              @change="updateJson"
            >
              <el-option label="清空" value="clear" />
              <el-option label="禁用" value="disable" />
              <el-option label="启用" value="enable" />
              <el-option label="计算" value="calculate" />
            </el-select>
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.formula" 
              @change="updateJson"
            >
              formula（计算公式）
            </el-checkbox>
            <el-input 
              v-if="selectedOptions.formula"
              v-model="fieldValues.formula" 
              placeholder="请输入公式，如：{{price}} * {{num}}"
              size="small"
              style="width: 200px; margin-left: 10px;"
              @input="updateJson"
            />
          </div>
          
          <div class="checkbox-item">
            <el-checkbox 
              v-model="selectedOptions.targetFields" 
              @change="updateJson"
            >
              targetFields（目标字段数组）
            </el-checkbox>
            <el-input 
              v-if="selectedOptions.targetFields"
              v-model="fieldValues.targetFields" 
              placeholder="请输入字段名，用逗号分隔"
              size="small"
              style="width: 200px; margin-left: 10px;"
              @input="updateJson"
            />
          </div>
        </div>
      </div>

      <!-- JSON 预览 -->
      <div class="json-preview">
        <h4>JSON 预览</h4>
        <el-input
          v-model="jsonPreview"
          type="textarea"
          :rows="6"
          readonly
          class="json-textarea"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleJsonEditorClose">取消</el-button>
          <el-button type="primary" @click="handleJsonEditorConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup name="OnlineEdit" lang="ts">
import { TableDictVO } from '@/api/online/types';
import { getGenTable, updateGenTable } from '@/api/tool/gen';
import { DbColumnVO, DbTableVO } from '@/api/tool/gen/types';
import { optionselect as getDictOptionselect } from '@/api/system/dict/type';
import { DictTypeVO } from '@/api/system/dict/type/types';
import basicInfoForm from '../design/basicInfoForm.vue';
import genInfoForm from "../design/genInfoForm.vue";
import { ComponentInternalInstance, getCurrentInstance, ref, watch, computed } from "vue";
import { useRoute } from 'vue-router';
// Element Plus icon
import { Edit, Plus, Delete } from '@element-plus/icons-vue';

const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const activeName = ref('columnInfo');
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px');
const tables = ref<DbTableVO[]>([]);
const columns = ref<DbColumnVO[]>([]);
const dictOptions = ref<DictTypeVO[]>([]);
const info = ref<Partial<DbTableVO>>({});

const basicInfo = ref<any>(basicInfoForm);
const genInfo = ref<any>(genInfoForm);
const tableOptions = ref<TableDictVO[]>([]);

// JSON 编辑器相关
const jsonEditorVisible = ref(false)
const currentJsonType = ref<'dictFields' | 'mapping' | 'onChange'>('dictFields')
const currentRow = ref<any>(null)

// 选中的配置项
const selectedOptions = ref<Record<string, boolean>>({})
// 字段值
const fieldValues = ref<Record<string, any>>({})
// 联动规则
const rules = ref<Array<{triggerField: string, targetField: string, type: string}>>([])

// 计算属性
const jsonEditorTitle = computed(() => {
  const titles = {
    dictFields: '字典字段配置',
    mapping: '字段映射配置',
    onChange: '联动规则配置'
  }
  return titles[currentJsonType.value]
})

const jsonPreview = computed(() => {
  try {
    if (currentJsonType.value === 'dictFields') {
      const result: any = {}
      if (selectedOptions.value.dictValue) {
        result.dictValue = fieldValues.value.dictValue
      }
      if (selectedOptions.value.dictLabel) {
        result.dictLabel = fieldValues.value.dictLabel
      }
      if (selectedOptions.value.orderField) {
        result.orderField = fieldValues.value.orderField
      }
      if (selectedOptions.value.where) {
        result.where = fieldValues.value.where
      }
      return JSON.stringify(result, null, 2)
    } else if (currentJsonType.value === 'mapping') {
      const result: any = {}
      if (selectedOptions.value.field) {
        result[fieldValues.value.fieldSource] = fieldValues.value.fieldTarget
      }
      if (selectedOptions.value.fieldName) {
        result[fieldValues.value.fieldNameSource] = fieldValues.value.fieldNameTarget
      }
      if (selectedOptions.value.id) {
        result[fieldValues.value.idSource] = fieldValues.value.idTarget
      }
      if (selectedOptions.value.name) {
        result[fieldValues.value.nameSource] = fieldValues.value.nameTarget
      }
      return JSON.stringify(result, null, 2)
    } else if (currentJsonType.value === 'onChange') {
      const result: any = {}
      if (selectedOptions.value.rules) {
        result.rules = rules.value
      }
      if (selectedOptions.value.type) {
        result.type = fieldValues.value.type
      }
      if (selectedOptions.value.formula) {
        result.formula = fieldValues.value.formula
      }
      if (selectedOptions.value.targetFields) {
        result.targetFields = fieldValues.value.targetFields.split(',').map((s: string) => s.trim())
      }
      return JSON.stringify(result, null, 2)
    }
    return '{}'
  } catch (error) {
    return '{}'
  }
})

// 打开 JSON 编辑器
const openJsonEditor = (type: 'dictFields' | 'mapping' | 'onChange', row: any) => {
  currentJsonType.value = type
  currentRow.value = row
  
  // 初始化数据
  if (type === 'dictFields') {
    const dictFields = row.dictFields ? JSON.parse(row.dictFields) : {}
    selectedOptions.value = {
      dictValue: !!dictFields.dictValue,
      dictLabel: !!dictFields.dictLabel,
      orderField: !!dictFields.orderField,
      where: !!dictFields.where
    }
    fieldValues.value = {
      dictValue: dictFields.dictValue || 'value',
      dictLabel: dictFields.dictLabel || 'label',
      orderField: dictFields.orderField || 'orderNum',
      where: dictFields.where || 'status = 1'
    }
  } else if (type === 'mapping') {
    const mapping = row.mapping ? JSON.parse(row.mapping) : {}
    selectedOptions.value = {
      field: !!mapping.field,
      fieldName: !!mapping.fieldName,
      id: !!mapping.id,
      name: !!mapping.name
    }
    fieldValues.value = {
      fieldSource: mapping.field || 'field',
      fieldTarget: mapping.field || 'field',
      fieldNameSource: mapping.fieldName || 'fieldName',
      fieldNameTarget: mapping.fieldName || 'fieldName',
      idSource: mapping.id || 'id',
      idTarget: mapping.id || 'id',
      nameSource: mapping.name || 'name',
      nameTarget: mapping.name || 'name'
    }
  } else if (type === 'onChange') {
    const onChange = row.onChange ? JSON.parse(row.onChange) : {}
    selectedOptions.value = {
      rules: !!onChange.rules,
      type: !!onChange.type,
      formula: !!onChange.formula,
      targetFields: !!onChange.targetFields
    }
    fieldValues.value = {
      type: onChange.type || 'clear',
      formula: onChange.formula || '{{price}} * {{num}}',
      targetFields: onChange.targetFields || 'field1,field2'
    }
    rules.value = onChange.rules || [{ triggerField: '', targetField: '', type: 'clear' }]
  }
  
  jsonEditorVisible.value = true
}

// 更新 JSON
const updateJson = () => {
  // 触发计算属性更新
}

// 添加规则
const addRule = () => {
  rules.value.push({ triggerField: '', targetField: '', type: 'clear' })
  updateJson()
}

// 删除规则
const removeRule = (index: number) => {
  rules.value.splice(index, 1)
  updateJson()
}

// 关闭 JSON 编辑器
const handleJsonEditorClose = () => {
  jsonEditorVisible.value = false
  currentRow.value = null
  selectedOptions.value = {}
  fieldValues.value = {}
  rules.value = []
}

// 确认 JSON 编辑器
const handleJsonEditorConfirm = () => {
  if (currentRow.value) {
    const jsonString = jsonPreview.value
    
    if (currentJsonType.value === 'dictFields') {
      currentRow.value.dictFields = jsonString
    } else if (currentJsonType.value === 'mapping') {
      currentRow.value.mapping = jsonString
    } else if (currentJsonType.value === 'onChange') {
      currentRow.value.onChange = jsonString
    }
  }
  
  handleJsonEditorClose()
}

/** 提交按钮 */
const submitForm = () => {
  const basicForm = (basicInfo as any).value.$refs.basicInfoForm;
  const genForm = (genInfo as any).value.$refs.genInfoForm;

  Promise.all([basicForm, genForm].map(getFormPromise)).then(async res => {
    const validateResult = res.every(item => !!item);
    if (validateResult) {
      const genTable: any = Object.assign({}, info.value);
      genTable.columns = columns.value;
      genTable.params = {
        treeCode: info.value?.treeCode,
        treeName: info.value.treeName,
        treeParentCode: info.value.treeParentCode,
        parentMenuId: info.value.parentMenuId
      };
      const response = await updateGenTable(genTable);
      proxy?.$modal.msgSuccess(response.msg);
      if (response.code === 200) {
        close();
      }
    } else {
      proxy?.$modal.msgError("表单校验未通过，请重新检查提交内容");
    }
  });
}

const getFormPromise = (form: any) => {
  return new Promise(resolve => {
    form.validate((res: any) => {
      resolve(res);
    });
  });
}

const close = () => {
  const obj = {path: "/onlineform/design", query: {t: Date.now(), pageNum: route.query.pageNum}};
  proxy?.$tab.closeOpenPage(obj);
}

const handleDictTypeChange = (row: any) => {
  if (row.htmlType === 'popup') {
    const selectedTable = tableOptions.value.find((t: TableDictVO) => t.tableName === row.dictType);
    if (selectedTable) {
      // 这里可以自动设置字段关联配置
    }
  }
}

(async () => {
  const tableId = route.params && route.params.tableId as string;
  if (tableId) {
    const res = await getGenTable(tableId);
    columns.value = res.data.rows as DbColumnVO[];
    info.value = res.data.info;
    tables.value = res.data.tables as DbTableVO[];
    tableOptions.value = tables.value.map((item: DbTableVO) => ({
      tableName: item.tableName,
      tableComment: item.tableComment
    }));
    const response = await getDictOptionselect();
    dictOptions.value = response.data;
  }
})();

watch(() => columns.value, (newVal: DbColumnVO[]) => {
  newVal.forEach((row: DbColumnVO) => {
    if (row.htmlType !== 'popup' && row.dictType && row.dictType.startsWith('sys_')) {
      // 保留原有字典逻辑
    } else if (row.htmlType === 'popup') {
      if (!tableOptions.value.some((t: TableDictVO) => t.tableName === row.dictType)) {
        row.dictType = '' as any;
      }
    }
  });
}, { deep: true });
</script>

<style scoped>
.json-editor-section {
  margin-bottom: 20px;
}

.json-editor-section h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.config-description {
  color: #606266;
  font-size: 14px;
  margin-bottom: 20px;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background-color: #fafafa;
  transition: all 0.2s;
}

.checkbox-item:hover {
  background-color: #f0f9ff;
  border-color: #409eff;
}

.mapping-inputs {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.rules-config {
  margin-left: 10px;
  width: 100%;
}

.rule-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  background-color: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.json-preview {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background-color: #f8f9fa;
}

.json-preview h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.json-textarea {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.dialog-footer {
  text-align: right;
}
</style>
